<template>
  <div class="entity-body">
    <div class="custom-header" :style="bodyStyle">
      <slot-header />
    </div>
    <div class="custom-content" :style="bodyStyle">
      <div class="custom-body" :loading="loading">
        <el-scrollbar
          style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
        >
          <component
            :is="templateName"
            v-if="templateName"
            :show-header="true"
            :temp="temp"
            :params="params"
          />
        </el-scrollbar>
      </div>
    </div>
    <div class="custom-footer" :style="bodyStyle">
      <slot-footer />
    </div>
  </div>
</template>

<script>
import { queryOne, queryGuestOne } from '@/api/portal/manager/entityTemp/index';
import { getToken } from '@/utils/auth';
import SlotHeader from './solt/header';
import SlotFooter from './solt/footer';
import { template } from '@/mixins/template';
export default {
  name: 'Open',
  components: {
    SlotFooter,
    SlotHeader
  }, // 新闻类列表详情页面
  mixins: [template],
  data() {
    return {
      loading: false,
      templateName: null,
      temp: null,
      params: []
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    temp: {
      handler(newName, oldName) {
        if (newName !== null) {
          const query = this.$route.query;
          const keys = Object.keys(query);
          const values = Object.values(query);
          if (keys !== null && keys.length > 0) {
            for (let i = 0; i < keys.length; i++) {
              if (keys[i] !== 'temp') {
                this.params.push({ code: keys[i], value: values[i] });
              }
            }
          }
          const path = '/' + this.temp.ssdl + '/' + this.temp.mbmc;
          const res = () => import(`@/template/entityTemp${path}`);
          this.templateName = res;

          // console.log(this.params)
        }
      },
      immediate: false, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    themes: {
      handler(val, oldVal) {
        this.$nextTick(() => {
          console.log(val);
          // this.bodyStyle.borderRadius = val.bkdx;
          this.bodyStyle.background = val.columnGroundColor;
          this.bodyStyle.color = val.fontColor;
          this.bodyStyle = Object.assign({}, this.bodyStyle);
        });
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  mounted() {
    window.addEventListener(
      'storage',
      e => {
        // e只是一个传参
        // 获取被修改的键值
        if (e.key == 'themes') {
          // 分别打印会发现内容一致
          // console.log(e.storageArea.themes);
          console.log(localStorage.themes);
          this.$store
            .dispatch('GetThemes')
            .then(res => {
              return true;
            })
            .catch(error => {
              console.log(error);
            });
          // this.$store.getters.theme = JSON.parse(localStorage.themes);
          // 此行代码只在Chrome浏览器中有效
          console.log(e.storageArea === localStorage); // 输出true
        }
      },
      false
    );
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.loading = true;
      if (getToken()) {
        queryOne({ id: this.$route.query.temp })
          .then(res => {
            const { data } = res;
            this.temp = data;
            this.loading = false;
          })
          .catch(() => {
            console.log('查询详情失败！');
            this.loading = false;
          });
      } else {
        queryGuestOne({ id: this.$route.query.temp })
          .then(res => {
            const { data } = res;
            this.temp = data;
            this.loading = false;
          })
          .catch(() => {
            console.log('查询详情失败！');
            this.loading = false;
          });
      }
    }
  }
};
</script>

<style scoped>
.entity-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
}
.custom-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 85px;
  z-index: 100;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.custom-content {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 40px;
  top: 85px;
  background-color: #ffffff;
}
.custom-footer {
  position: fixed;
  left: 0px;
  right: 0px;
  height: 40px;
  bottom: 0px;
  background-color: #00a0e9;
  z-index: 100;
}
.custom-body {
  padding: 0px 55px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
